<template >
   <div class="Leftinfo">
           <div class='info'  
        v-for='(item,index) in tyList' 
        :key="index + '-onl'">
          <span class='year' 
          v-if="item.name == name"
          v-for='(iteme,index) in item.items'
          :key="iteme.RUID"
          @click='shujk(iteme.RUID,index)'
          >
          <!--  -->
           <span class='sleter' :class="{active:arr.includes(index)}"></span>
           <span> {{ iteme.name }}</span> |{{ iteme.count }}</span>
          
        </div>
   </div>
</template>
<script>
export default {
   data(){
      return {
        
      }
   },
   props:{
      tyList:{
         type:Array,
         default:() => []
      },
       arr:{
         type:Array,
         default:() => []
      },
      name:{
         type:String,
         default:''
      }
   },
   methods:{
      shujk(id,index){
         this.$emit('func',{id,index})
      }
   }
}
</script>
<style lang="scss" scoped>
   .info {
      background: #eeeeee;
      max-height: 204px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 5px;
      box-sizing: border-box;
      .year {
        display: inline-block;
        padding: 10px;
        box-sizing: border-box;
        border-bottom: 1px solid #fff;
        .sleter {
          display: inline-block;
          width: 15px;
          height: 15px;
          border: 1px solid #999;
          border-radius: 50%;
        }
        .active {
          display: inline-block;
          width: 15px;
          height: 15px;
          background: #191;
          border-radius: 50%;
        }
      }
    }
</style>